<template>
    <div>
        <div class="information-detail-head">
            <Breadcrumb>
                <BreadcrumbItem >首页</BreadcrumbItem>
                <BreadcrumbItem>{{typeMap(page.action_data.p_type)}}</BreadcrumbItem>
                <BreadcrumbItem v-if="this.page.action_data.a_type!='*' && this.page.action_data.a_type!='' && this.page.action_data.a_type!=0">{{page.action_data.a_type}}</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <div class="inco-list">
                <Row v-for="item in list">
                    <Col span="18">
                        <Icon :type="iconType(item.p_type)" size="22" :color="iconColor(item.p_type)"></Icon>
                        <router-link :to="{ name:'main_article_detail',params:{p_type: item.p_type,id: item.id}}" style="line-height:30px;">{{item.title}}</router-link>
                    </Col>
                    <Col span="6">
                        <span style="line-height:33px;">{{item.formated_create_time}}</span>
                    </Col>
                </Row>
        </div>
        <div class="information-detail-bottom">
            <AutoPage v-model="page"></AutoPage>
        </div>
    </div >             
</template>

<script>
import Page from "@/common/model/Page";
import AutoPage from "@/common/components/AutoPage";
import Article from "@/common/model/Article";

export default {
    name: "article_list",
    data() {
        return {
            page: new Page('search/article', {p_type: this.$route.params.p_type, a_type: this.$route.params.a_type}) //这是当点击首页的文章类别时直接从首页传递过来的值
        }
    },
    computed: {
        list() {
            return Article.parseList(this.page.list);
        }
    },
    components: {
        AutoPage
    },
    methods: {
        fetchData() {   
            this.needRefresh("article_list", () => {
                this.page = new Page('search/article', {p_type: this.$route.params.p_type, a_type: this.$route.params.a_type});
                this.page.getData();
            });
        },
        typeMap(type) {
            return ({notice:"通知公告", news:"新闻资讯", laws:"政策法规"})[type];
        },
        iconType(type) {
            if(type == "notice") {
                return "ios-volume-high";
            }else if(type == "news") {
                return "document-text";
            }else if(type == "laws") {
                return "social-buffer";
            }
        },
        iconColor(type) {
            if(type == "notice") {
                return "#0d1df3"
            }else if(type == "news") {
                return "#14b0ee"
            }else if(type == "laws") {
                return "#f5270c"
            }
        }
    },
    watch: {
        "$route": "fetchData"
    }
};
</script>

<style scoped>
.information-detail-head
{
    width:100%;
    position: relative;
    z-index: -1;     
}
.information-detail-bottom
{
    padding-top:10px;
    height:80px;
    text-align:center;
}
.information-detail-bottom ul
{
    padding-top:10px; 
}
.ivu-breadcrumb {
    font-size: 14px;
    padding-top: 2%;
    padding-left:15px;
}
.ivu-icon {
    display: inline-block;
    font-family: Ionicons;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-right: 1%;
    padding-top: 1%;
}
.inco-list{
    position: relative;
}
.inco-list ul
{
    padding-top:4%;
    padding-bottom: 4%;
}
.inco-list li
{
    font-size:14px;
}
.inco-list span
{
    float: right;
    padding-right: 1%;
}
.inco-list a
{
    text-decoration: none;
    font-size: 14px;
    color: rgb(73, 68, 68);
}
.inco-list li:hover
{
    background-color: rgba(231, 240, 240,0.7);
}
.ivu-breadcrumb {
    color: #999;
    font-size: 14px;
}
.ivu-breadcrumb>span:last-child {
    font-weight: 700;
    color: #495060;
}
</style>    